<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<title></title>
		<link rel="stylesheet" type="text/css" href="../css/index.css" />
		<script src="../js/vue.min.js"></script>
		<script src="../js/vant.min.js"></script>
		<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>
		<script src="../js/ajax.js"></script>
	</head>
	<body>
		<div id="app">
			<!-- 搜索框 -->
			<van-row style="background-color: red;">
				<van-col span="21">
					<van-search placeholder="搜索商品名称" style="background-color: red;" />
				</van-col>
				<van-col span="3" style="height: 54px;">
					<van-cell icon="chat-o" size="40px" style="background-color: red; color: #F8F8F8;"></van-cell>
				</van-col>
			</van-row>
			<!-- 轮播图 -->
			<van-row>
				<van-col span="24">
					<van-swipe :autoplay="2000" indicator-color="white">
						<van-swipe-item v-for="item in CarouselFigureList"><img :src="item.ImageUrl" width="100%" />
						</van-swipe-item>
					</van-swipe>
				</van-col>
			</van-row>
			<!-- 商品-->
			<van-row style="margin-left: 20px;margin-top: 16px;margin-bottom:16px;color:#7D7E80;">
				<van-col span="5">
					<div>
						<img src="../img/20190326142114.png" />
					</div>
					<div>酒水饮料</div>
				</van-col>
				<van-col span="5">
					<div>
						<img src="../img/20190326142157.png" />
					</div>
					<div>厨房用品</div>
				</van-col>
			</van-row>
			<!-- 商品块-->
			<van-row>
				<van-col span="24">
					<van-search label="资讯" placeholder="查看" show-action shape="round">
						<div slot="action">
							<a href="">更多</a>
						</div>
					</van-search>
				</van-col>
			</van-row>
			<!-- 热门推荐 -->
			<van-row>
				<van-col span="24">
					<van-cell value="热门推荐" size="large" />
				</van-col>
				<div>
					<div style="margin: 10px;" v-for="goods in GoodsRecommendList">
						<van-row style="margin: 10px;" >
							<van-col span="8">
								<img :src="images" style="width: 100%;" />
							</van-col>
							<van-col span="16">
								<div >
									<van-cell :title="goods.Name" ></van-cell>
								</div>
								<div >
									<span style="color: red;">￥{{goods.RealPrice}}</span>
								</div>
							</van-col>
						</van-row>
					</div>
				</div>
			</van-row>
			<!-- 商品列表 -->
				<van-collapse v-model="activeNames">
					<van-collapse-item size="large" title-class="left_border_blue" title="商品列表" name="2">
						<van-card v-for="product in HotData" :title="product.Name" @click="onclick(product.Id)">
							<div slot="thumb">
								<img :src="product.GoodsImageUrl.src" onerror="javascript:this.src='../img/yjz.jpg';">
							</div>
							<span slot="price">￥{{product.RealPrice}}</span>
							<span slot="origin-price">￥{{product.MarketPrice}}</span>
							<span slot="desc">累计销量{{product.VirtualSaleCount}}</span>
							<span slot="num">{{product.BrowseCount}}次浏览</span>
						</van-card>
					</van-collapse-item>
				<van-collapse>

		</div>

		<script type="text/javascript">
			Vue.use(VueLazyload, {
					error:"../img/yjz.jpg"
			});
			var vm = new Vue({
				el: "#app",
				data: {
					activeNames: ['1'],
					CarouselFigureList: [],
					HotGoodsTypeList: [],
					InformationList: [],
					GoodsRecommendList: [],
					HotData: [],
					images:['../img/1.jpeg'],
				},
				methods: {
					onclick:function(id){
						plus.webview.create("../shopknow/guym.html","guym",{},{shopId:id}).show();
					},
					//首页头
					onhome: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							success: function(res) {
								_this.CarouselFigureList = res.Data.CarouselFigureList;
								_this.InformationList = res.Data.InformationList;
								_this.GoodsRecommendList = res.Data.GoodsRecommendList;
								_this.HotGoodsTypeList = res.Data.HotGoodsTypeList;
							}
						});
					},
					//首页商品
					onshop: function() {
						var _this = this;
						ajax({
							url: "http://dsapi.ysd3g.com/api/IndexGoodsData",
							dataType: "jsonp",
							data: {
								p: 1
							},
							success: function(res) {
								_this.HotData = res.Data;
							}
						});
					},

				},
				created: function() {
					this.onhome();
					this.onshop();
				}
			})
		</script>
	</body>
</html>
